<?php
// 根据文章类型设置示例数据
$article= [
    'id' => 1001,
    'title' => '人工智能如何改变未来十年的工作方式',
    'subtitle' => '探索AI技术对各行各业的深远影响',
    'cover_image' => 'https://picsum.photos/seed/tech1/1600/900',
    'category' => '科技创新',
    'tags' => ['人工智能', '未来工作', '技术趋势', '自动化'],
    'publish_date' => '2023-11-15',
    'read_time' => '8 分钟',
    'author' => [
        'name' => '张明',
        'avatar' => 'https://picsum.photos/seed/author1/100/100',
        'title' => '科技专栏作家',
        'bio' => '专注于人工智能和科技趋势研究，曾任职于多家知名科技媒体。'
    ],
    'views' => 12543,
    'comments' => 234,
    'likes' => 1876,
    'content' => [
        [
            'type' => 'heading',
            'text' => '引言：AI时代的到来'
        ],
        [
            'type' => 'paragraph',
            'text' => '随着人工智能技术的飞速发展，我们正在见证一场前所未有的工作方式变革。从自动化办公到智能决策支持，AI正在各个行业发挥着越来越重要的作用。在这篇文章中，我们将探讨人工智能如何在未来十年内彻底改变我们的工作方式，以及我们应该如何做好准备。'
        ],
        [
            'type' => 'image',
            'src' => 'https://picsum.photos/seed/tech2/1200/600',
            'alt' => 'AI与工作场景',
            'caption' => '人工智能正在改变传统的工作场景'
        ],
        [
            'type' => 'heading',
            'text' => 'AI对不同行业的影响'
        ],
        [
            'type' => 'paragraph',
            'text' => '人工智能技术对各行各业都产生了深远影响。在制造业，自动化机器人和智能质检系统提高了生产效率和产品质量；在金融行业，算法交易和风险评估模型正在改变传统的金融服务模式；在医疗健康领域，AI辅助诊断和个性化治疗方案为患者带来了更好的医疗体验。'
        ],
        [
            'type' => 'list',
            'items' => [
                '制造业：自动化生产线和预测性维护',
                '金融服务：智能风控和个性化金融产品',
                '医疗健康：AI辅助诊断和药物研发',
                '零售业：智能推荐和库存管理',
                '教育：个性化学习和智能评估'
            ]
        ],
        [
            'type' => 'heading',
            'text' => '未来工作的新趋势'
        ],
        [
            'type' => 'paragraph',
            'text' => '随着AI技术的普及，我们的工作方式也在发生变化。远程工作、灵活办公时间、项目制合作等新型工作模式正在兴起。同时，人与AI的协作也成为未来工作的重要特征。未来的工作者需要学会如何与AI系统合作，发挥各自的优势。'
        ],
        [
            'type' => 'blockquote',
            'text' => '"未来不是人类与AI的竞争，而是懂得如何与AI合作的人类与不懂如何与AI合作的人类之间的竞争。"'
        ],
        [
            'type' => 'heading',
            'text' => '如何为AI时代做好准备'
        ],
        [
            'type' => 'paragraph',
            'text' => '面对AI时代的挑战，我们需要不断学习和适应。培养创造力、批判性思维、情感智能等AI难以替代的能力将变得尤为重要。同时，我们也需要学习如何使用AI工具来提高工作效率，让AI成为我们的得力助手。'
        ]
    ]
];

?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($article['title']); ?> | 文章详情</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: <?php echo json_encode($themeConfig ?? []);?>
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .article-card-shadow {
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            }
            .article-card-hover {
                transition: all 0.3s ease;
            }
            .article-card-hover:hover {
                transform: translateY(-6px);
                box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
            }
            .featured-image {
                transition: all 0.5s ease;
            }
            .featured-image:hover {
                transform: scale(1.02);
            }
            .text-balance {
                text-wrap: balance;
            }
            .article-content p {
                margin-bottom: 1.5rem;
                line-height: 1.7;
            }
            .article-content h2 {
                margin-top: 2.5rem;
                margin-bottom: 1.5rem;
                font-size: 1.8rem;
                font-weight: 700;
                color: #1A1A2E;
            }
            .article-content blockquote {
                padding-left: 1.5rem;
                margin: 2rem 0;
                font-style: italic;
                color: #6B7280;
            }
            .article-content ul, .article-content ol {
                margin: 1.5rem 0;
                padding-left: 1.5rem;
            }
            .article-content li {
                margin-bottom: 0.5rem;
            }
            .article-content img {
                margin: 2rem 0;
                border-radius: 0.5rem;
            }
            .article-content figcaption {
                text-align: center;
                color: #6B7280;
                font-size: 0.9rem;
                margin-top: 0.5rem;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <?php
    // 引入头部导航 - 使用映射表查找文件
    call_user_func('renderComponent', 'header');
    ?>
    <!-- 主内容 -->
    <main class="">
        <!-- 文章封面区 -->
        <section class="relative h-[60vh] min-h-[400px] flex items-center overflow-hidden">
            <div class="absolute inset-0 z-0">
                <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent z-10"></div>
                <img 
                    src="<?php echo htmlspecialchars($article['cover_image']); ?>"
                    alt="<?php echo htmlspecialchars($article['title']); ?> 封面"
                    class="w-full h-full object-cover"
                >
            </div>
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-20">
                <div class="max-w-4xl">
                    <div class="flex flex-wrap gap-3 mb-4">
                        <span class="inline-block px-3 py-1 bg-primary/90 text-white text-sm font-medium rounded-full backdrop-blur-sm">
                            <?php echo htmlspecialchars($article['category']); ?>
                        </span>
                        <?php foreach (array_slice($article['tags'], 0, 2) as $tag): ?>
                            <span class="inline-block px-3 py-1 bg-white/20 text-white text-sm font-medium rounded-full backdrop-blur-sm">
                                <?php echo htmlspecialchars($tag); ?>
                            </span>
                        <?php endforeach; ?>
                    </div>
                    <h1 class="text-3xl md:text-5xl font-bold text-white mb-2 leading-tight">
                        <?php echo htmlspecialchars($article['title']); ?>
                    </h1>
                    <p class="text-xl text-gray-200 mb-6 max-w-2xl">
                        <?php echo htmlspecialchars($article['subtitle']); ?>
                    </p>
                    <div class="flex flex-wrap gap-6 items-center">
                        <div class="flex items-center">
                            <img 
                                src="<?php echo htmlspecialchars($article['author']['avatar']); ?>"
                                alt="<?php echo htmlspecialchars($article['author']['name']); ?>"
                                class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-white/30"
                            >
                            <div>
                                <div class="text-white font-medium"><?php echo htmlspecialchars($article['author']['name']); ?></div>
                                <div class="text-gray-300 text-sm"><?php echo htmlspecialchars($article['author']['title']); ?></div>
                            </div>
                        </div>
                        <div class="flex items-center text-gray-300">
                            <i class="fa fa-calendar mr-2"></i>
                            <?php echo htmlspecialchars($article['publish_date']); ?>
                        </div>
                        <div class="flex items-center text-gray-300">
                            <i class="fa fa-clock-o mr-2"></i>
                            <?php echo htmlspecialchars($article['read_time']); ?>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 文章内容区 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                    <!-- 文章内容 -->
                    <div class="article-content text-lg leading-relaxed text-gray-700 mb-12">
                        <?php foreach ($article['content'] as $item): ?>
                            <?php if ($item['type'] === 'heading'): ?>
                                <h2><?php echo htmlspecialchars($item['text']); ?></h2>
                            <?php elseif ($item['type'] === 'paragraph'): ?>
                                <p><?php echo htmlspecialchars($item['text']); ?></p>
                            <?php elseif ($item['type'] === 'image'): ?>
                                <figure>
                                    <img 
                                        src="<?php echo htmlspecialchars($item['src']); ?>"
                                        alt="<?php echo htmlspecialchars($item['alt']); ?>"
                                        class="w-full h-auto"
                                    >
                                    <figcaption><?php echo htmlspecialchars($item['caption']); ?></figcaption>
                                </figure>
                            <?php elseif ($item['type'] === 'blockquote'): ?>
                                <blockquote>
                                    <p><?php echo htmlspecialchars($item['text']); ?></p>
                                </blockquote>
                            <?php elseif ($item['type'] === 'list'): ?>
                                <ul>
                                    <?php foreach ($item['items'] as $list_item): ?>
                                        <li><?php echo htmlspecialchars($list_item); ?></li>
                                    <?php endforeach; ?>
                                </ul>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </div>
                    
                    <!-- 文章标签 -->
                    <div class="mb-12 pb-8 border-b border-gray-200">
                        <div class="flex flex-wrap gap-2">
                            <span class="text-gray-500">标签：</span>
                            <?php foreach ($article['tags'] as $tag): ?>
                                <a href="#" class="px-3 py-1 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-gray-200 transition-colors">
                                    <?php echo htmlspecialchars($tag); ?>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    
                    <!-- 文章交互 -->
                    <div class="flex flex-wrap justify-between items-center mb-12">
                        <div class="flex gap-4 mb-4 sm:mb-0">
                            <button class="flex items-center space-x-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                <i class="fa fa-thumbs-up text-primary"></i>
                                <span><?php echo htmlspecialchars($article['likes']); ?></span>
                            </button>
                            <button class="flex items-center space-x-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                <i class="fa fa-comment text-gray-500"></i>
                                <span><?php echo htmlspecialchars($article['comments']); ?></span>
                            </button>
                            <button class="flex items-center space-x-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                <i class="fa fa-bookmark text-gray-500"></i>
                                <span>收藏</span>
                            </button>
                        </div>
                        <div class="flex gap-2">
                            <span class="text-gray-500 flex items-center">分享：</span>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-100 hover:text-blue-500 transition-colors">
                                <i class="fa fa-weixin"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-red-100 hover:text-red-500 transition-colors">
                                <i class="fa fa-weibo"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-green-100 hover:text-green-500 transition-colors">
                                <i class="fa fa-qq"></i>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 作者信息 -->
                    <div class="bg-gray-50 rounded-xl p-6 mb-16">
                        <div class="flex flex-col sm:flex-row items-center sm:items-start gap-6">
                            <img 
                                src="<?php echo htmlspecialchars($article['author']['avatar']); ?>"
                                alt="<?php echo htmlspecialchars($article['author']['name']); ?>"
                                class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-md"
                            >
                            <div class="text-center sm:text-left">
                                <h3 class="text-xl font-bold mb-1"><?php echo htmlspecialchars($article['author']['name']); ?></h3>
                                <p class="text-gray-500 mb-3"><?php echo htmlspecialchars($article['author']['title']); ?></p>
                                <p class="text-gray-700 mb-4 max-w-lg"><?php echo htmlspecialchars($article['author']['bio']); ?></p>
                                <button class="px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    关注作者
                                </button>
                            </div>
                        </div>
                    </div>
                    
                
            </div>
        </section>
        <!-- 引入页面依赖的碎片 -->
        <?php if (!empty($pageConfig['dependencies'])): ?>
            <?php foreach ($pageConfig['dependencies'] as $fragment): ?>
                <?php
                // 使用渲染组件函数
                if (is_callable('renderComponent')) {
                    call_user_func('renderComponent', $fragment);
                }
                ?>
            <?php endforeach; ?>
        <?php endif; ?>
    </main>

    <?php
    call_user_func('renderComponent', 'footer');
    call_user_func('renderComponent', 'scripts');
    ?>
</body>
</html>